@font-face {
    font-family: 'Engagement';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/engagement.ttf);
}

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.ttf?4synl3');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-pencil-reveal:before {
	content: "\e622";
}

.icon-pencil:before {
	content: "\e621";
}

.icon-ereaser:before {
	content: "\e616";
}

.icon-ereaser2:before {
	content: "\e61f";
}

.icon-grid:before {
	content: "\e615";
}

.icon-alert:before {
	content: "\f02d";
}

.icon-circle-slash:before {
	content: "\f084";
}

.icon-eye:before {
	content: "\f04e";
}

.icon-light-bulb:before {
	content: "\f000";
}

.icon-list-unordered:before {
	content: "\f061";
}

.icon-search:before {
	content: "\f02e";
}

.icon-three-bars:before {
	content: "\f05e";
}

.icon-tools2:before {
	content: "\f031";
}

.icon-trashcan:before {
	content: "\f0d0";
}

.icon-curved-arrow:before {
	content: "\e613";
}

.icon-curved-arrow2:before {
	content: "\e614";
}

.icon-connection:before {
	content: "\e600";
}

.icon-clock:before {
	content: "\e601";
}

.icon-stopwatch:before {
	content: "\e602";
}

.icon-undo:before {
	content: "\e603";
}

.icon-redo:before {
	content: "\e604";
}

.icon-undo2:before {
	content: "\e605";
}

.icon-redo2:before {
	content: "\e606";
}

.icon-forward:before {
	content: "\e607";
}

.icon-reply:before {
	content: "\e608";
}

.icon-spinner:before {
	content: "\e62b";
}

.icon-restart:before {
	content: "\e609";
}

.icon-search2:before {
	content: "\e618";
}

.icon-wrench:before {
	content: "\e60a";
}

.icon-cog:before {
	content: "\e60b";
}

.icon-cogs:before {
	content: "\e60c";
}

.icon-cog2:before {
	content: "\e60d";
}

.icon-wand:before {
	content: "\e620";
}

.icon-remove:before {
	content: "\e619";
}

.icon-download:before {
	content: "\e623";
}

.icon-eye3:before {
	content: "\e624";
}

.icon-eye-blocked:before {
	content: "\e625";
}

.icon-eye2:before {
	content: "\e61a";
}

.icon-thumb-up:before {
	content: "\e61b";
}

.icon-thumb-down:before {
	content: "\e61c";
}

.icon-smiley:before {
	content: "\e626";
}

.icon-tongue:before {
	content: "\e627";
}

.icon-angry:before {
	content: "\e628";
}

.icon-evil:before {
	content: "\e629";
}

.icon-info:before {
	content: "\e62a";
}

.icon-quit:before {
	content: "\e62d";
}

.icon-loop:before {
	content: "\e62c";
}

.icon-reply2:before {
	content: "\e60f";
}

.icon-forward2:before {
	content: "\e610";
}

.icon-tools:before {
	content: "\e61d";
}

.icon-checkmark:before {
	content: "\e60e";
}

.icon-cross2:before {
	content: "\e617";
}

.icon-cross:before {
	content: "\e611";
}

.icon-blocked2:before {
	content: "\e61e";
}

.icon-ellipsis:before {
	content: "\e612";
}

.btn {
    box-sizing: border-box;
    border-radius: 0.2em;
    border: 1px solid #444;
}

    .btn > i {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        font-style: normal;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        flex-flow: column;
        justify-content: center;
        transition: background 0.2s ease-in,color 0.2s;
        background: rgba(240,128,128,0); /* lighcoral*/
        border-radius: 0.2em;
    }

    .btn.active > i {
        background: rgba(240,128,128,1); /* lighcoral*/
        transition: none;
    }

    .btn.btn-noborder {
        border: none;
    }

    .btn.switch > i {
        transition: background 0.1s;
        background: rgba(173, 255, 73, 0); /* greenyellow*/
    }

    .btn.switch.on > i {
        background: rgba(135, 214, 0, 0.45); /* greenyellow*/
    }

    .btn.switch.active > i {
        background: rgba(135, 214, 0, 0.6); /* greenyellow*/
    }

    .btn.disabled {
        color: #aaa;
    }

        .btn.disabled > i,
        .btn.switch.disabled > i {
            background: none;
        }

/*remove click delay for IE*/
html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

body {
    color: #333;
    padding: 0;
    margin: 0;
    font-family: "Engagement";
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    background: url("img/old-paper.jpg");
    /*-webkit-transform: translateZ(0);*/
}

#innerbody {
    box-sizing: border-box;
    min-height: 400px;
    padding: 0.3% 0.3% 0 0.3%;
    background-size: cover;
    margin: auto;
    overflow: hidden;
}

b[data-resx] {
    font-weight: inherit;
}

#screen {
    /*overflow: hidden;*/
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% / 1.4);
}

    #screen:after {
        content: '';
        clear: both;
    }

    #screen .screen-page {
        display: flex;
        overflow: hidden;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        /*left: 130%;*/
        width: 100%;
        transform: translate3D(-120%,0,0);
        transition: transform 0.3s;
        /*background: red;*/
    }

    #screen .screen-page.visible {
        transform: translate3D(0,0,0);
        /*background: red;*/
    }

    #screen .home-screen {
        width: 100%;
        height: 100%;
    }

        #screen .home-screen .title {
            height: 100%;
            width: 100%;
            font-size: 3.5em;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
            text-shadow: 0.01em 0.01em white;
        }

.grid {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
}

    .grid .cell {
        box-sizing: border-box;
        vertical-align: top;
        height: calc(100% / 9.01);
        width: calc(100% / 9.01);
        transition: background 0.1s, color 0.5s;
    }

        .grid .cell .cell-content {
            border-bottom: 1px solid #444;
            border-right: 1px solid #444;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            overflow: hidden; /*font-size:0.4em;*/
        }

        .grid .cell.row0 {
            border-top: 0.1em solid #444;
        }

        .grid .cell.column0 {
            border-left: 0.1em solid #444;
        }

        .grid .cell.column8 {
            border-right: 0.1em solid #444;
        }

        .grid .cell.row2,
        .grid .cell.row5,
        .grid .cell.row8 {
            border-bottom: 0.1em solid #444;
        }

            .grid .cell.row2 .cell-content,
            .grid .cell.row5 .cell-content,
            .grid .cell.row8 .cell-content {
                border-bottom: none;
            }

        .grid .cell.column2,
        .grid .cell.column5 {
            border-right: 0.1em solid #444;
        }

            .grid .cell.column2 .cell-content,
            .grid .cell.column5 .cell-content,
            .grid .cell.column8 .cell-content {
                border-right: none;
            }

        .grid .cell .candidates {
            display: none;
            width: 100%;
            height: 100%;
            font-size: 0.30em;
            flex-flow: column nowrap;
        }

            .grid .cell .candidates .candidateRow {
                align-content: stretch;
                align-items: unset;
                display: flex;
                flex-basis: 0;
                flex-flow: row nowrap;
                flex-grow: 1;
                justify-content: space-around;
                width: 100%;
            }


            .grid .cell .candidates .candidate {
                flex-grow: 1;
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                visibility: hidden;
                border-radius: 20%;
            }

                .grid .cell .candidates .candidate.visible {
                    visibility: inherit;
                }

        .grid .cell .single {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            color: darkolivegreen;
        }

        .grid .cell.isbase .single {
            color: inherit;
        }

        .grid .cell.selected,
        .grid .cell.similar-highlight.selected,
        .grid .cell.error.selected {
            background: rgba(135, 214, 0, 0.45); /* greenyellow*/
        }

        .grid .cell.similar-highlight {
            background: rgba(50, 200, 214, 0.35);
        }

        .grid .cell.error {
            background: rgba(255, 106, 0,0.35);
        }

        .grid .cell.checkError {
            background: rgba(255, 20, 0,0.35);
        }

        .grid .cell.active {
            background: rgba(135, 214, 0, 0.45);
        }

        .grid .cell.show-candidates .candidates {
            display: flex;
        }

        .grid .cell.show-candidates .single {
            display: none;
        }

        .grid .cell.glow,
        .grid .cell.glow .single,
        .grid .cell.glow.isbase .single {
            color: #fff;
            transition: none;
        }

        .grid .cell .candidate.hint-ok {
            background: rgba(135, 214, 0, 0.45);
        }

        .grid .cell .candidate.hint-remove {
            background: rgba(255, 106, 0,0.35);
        }

        .grid .cell .candidate.hint-on {
            background: rgba(135, 214, 0, 0.45);
        }

        .grid .cell .candidate.hint-off {
            background: rgba(50, 200, 214, 0.35);
        }

        .grid .cell .candidate.hint-conflict {
            box-shadow: 0px 0px 5px 5px rgba(255, 20, 0,0.35);
        }

        .grid .cell .candidate.hint-seetwo {
            box-shadow: 0px 0px 5px 5px rgba(255, 20, 0,0.35);
        }

#footer {
    /*overflow: hidden;*/
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% * (1 - 1 / 1.4));
    margin: 0 auto;
}

    #footer .footer-page {
        display: flex;
        overflow: hidden;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transform: translate3D(-120%,0,0);
        transition: transform 0.3s;
    }

        #footer .footer-page.visible {
            transform: translate3D(0,0,0);
        }

        #footer .footer-page .btn-back {
            display: flex;
            flex-basis: 0;
            flex-grow: 1;
            flex-flow: column nowrap;
            justify-content: space-around;
            align-items: center;
            height: 100%;
            border: none;
        }

            #footer .footer-page .btn-back > i {
                height: 90%;
                width: 90%;
            }

        #footer .footer-page .content {
            flex-basis: 0;
            flex-grow: 4;
            display: flex;
            flex-flow: column nowrap;
            align-items: stretch;
            justify-content: space-around;
            height: 100%;
        }

        #footer .footer-page .btn-menu {
            height: 30%;
        }

            #footer .footer-page .btn-menu [class^="icon-"] {
                position: absolute;
                visibility: visible;
                left: 2%;
                top: 23%;
            }

    #footer #menu-play-keyboard {
        flex-flow: row wrap;
    }

        #footer #menu-play-keyboard .side {
            /*background: #eee;*/
            flex-basis: 0;
            flex-grow: 1;
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-around;
            height: 100%;
        }

            #footer #menu-play-keyboard .side.left {
                align-items: flex-start;
            }

            #footer #menu-play-keyboard .side.right {
                align-items: flex-end;
            }

        #footer #menu-play-keyboard .middle {
            /*background: #aaa;*/
            flex-basis: 0;
            flex-grow: 3;
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            justify-content: space-around;
            height: 100%;
        }

        #footer #menu-play-keyboard .side .btn {
            width: 96%;
            height: 30%;
        }

        #footer #menu-play-keyboard .middle .btn {
            width: 32%;
            height: 30%;
        }

        #footer #menu-play-keyboard .btn.pencil .icon-pencil {
            font-size: 1.5em;
        }

        #footer #menu-play-keyboard .btn.clock .time {
            display: none;
        }

        #footer #menu-play-keyboard .btn.clock.show-time .time {
            display: block;
        }

        #footer #menu-play-keyboard .btn.clock.show-time .icon-clock {
            display: none;
        }

    #footer .footer-page .question {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
    }

        #footer .footer-page .question .label {
            height: 50%;
            font-size: 1.5em;
            text-align: center;
        }

        #footer .footer-page .question .actions {
            height: 30%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
        }

            #footer .footer-page .question .actions .btn-menu {
                width: 45%;
                height: 100%;
            }

    #footer .footer-page .content.with-text {
    }

        #footer .footer-page .content.with-text > .title {
        }

        #footer .footer-page .content.with-text > .sub-title {
            font-size: 0.6em;
        }

        #footer .footer-page .content.with-text .actions {
            height: 30%;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
        }

            #footer .footer-page .content.with-text .actions .btn-menu {
                width: 45%;
                height: 100%;
            }

/* ios safari*/
* {
    -webkit-tap-highlight-color: transparent;
}
/*================== button ======================*/

.btn > i {
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-flex-flow: column;
    -webkit-justify-content: center;
}

/*================== screen ======================*/

#screen .screen-page {
    display: -webkit-flex;
    -webkit-transform: translate3D(-120%,0,0);
    transition: -webkit-transform 0.3s;
    /*background: red;*/
}

    #screen .screen-page.visible {
        -webkit-transform: translate3D(0,0,0);
        /*background: red;*/
    }

#screen .home-screen .title {
    display: -webkit-flex;
    -webkit-flex-flow: column nowrap;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

/*================== footer ======================*/

#footer .footer-page {
    display: -webkit-flex;
}

    #footer .footer-page .btn-back {
        display: -webkit-flex;
        -webkit-flex-basis: 0;
        -webkit-flex-grow: 1;
        -webkit-flex-flow: column nowrap;
        -webkit-justify-content: space-around;
        -webkit-align-items: center;
    }

    #footer .footer-page .content {
        -webkit-flex-basis: 0;
        -webkit-flex-grow: 4;
        display: -webkit-flex;
        -webkit-flex-flow: column nowrap;
        -webkit-align-items: stretch;
        -webkit-justify-content: space-around;
    }


#menu-play-keyboard {
    -webkit-flex-flow: row wrap;
}

    #menu-play-keyboard .side {
        /*background: #eee;*/
        -webkit-flex-basis: 0;
        -webkit-flex-grow: 1;
        display: -webkit-flex;
        -webkit-flex-flow: column nowrap;
        -webkit-justify-content: space-around;
    }

        #menu-play-keyboard .side.left {
            -webkit-align-items: flex-start;
        }

        #menu-play-keyboard .side.right {
            -webkit-align-items: flex-end;
        }

    #menu-play-keyboard .middle {
        /*background: #aaa;*/
        -webkit-flex-basis: 0;
        -webkit-flex-grow: 3;
        display: -webkit-flex;
        -webkit-flex-flow: row wrap;
        -webkit-align-items: center;
        -webkit-justify-content: space-around;
    }


#footer .footer-page {
    -webkit-transform: translate3D(-120%,0,0);
    -webkit-transition: -webkit-transform 0.3s;
}

    #footer .footer-page.visible {
        -webkit-transform: translate3D(0,0,0);
    }

    #footer .footer-page .question {
        display: -webkit-flex;
        -webkit-flex-flow: column nowrap;
        -webkit-justify-content: space-around;
    }

        #footer .footer-page .question .actions {
            display: -webkit-flex;
            -webkit-flex-flow: row nowrap;
            -webkit-justify-content: space-around;
        }

    #footer .footer-page .content.with-text .actions {
        display: -webkit-flex;
        -webkit-flex-flow: row nowrap;
        -webkit-justify-content: space-around;
    }

/*================== grid ======================*/

.grid {
    display: -webkit-flex;
    -webkit-flex-flow: row wrap;
    -webkit-align-content: flex-start;
    -webkit-align-items: flex-start;
    -webkit-justify-content: center;
}

    .grid .cell .candidates {
        -webkit-flex-flow: column nowrap;
    }

        .grid .cell .candidates .candidateRow {
            -webkit-align-content: stretch;
            -webkit-align-items: unset;
            display: -webkit-flex;
            -webkit-flex-basis: 0;
            -webkit-flex-flow: row nowrap;
            -webkit-flex-grow: 1;
            -webkit-justify-content: space-around;
        }


        .grid .cell .candidates .candidate {
            -webkit-flex-grow: 1;
            display: -webkit-flex;
            -webkit-flex-flow: column nowrap;
            -webkit-justify-content: center;
        }


    .grid .cell .single {
        display: -webkit-flex;
        -webkit-flex-flow: column nowrap;
        -webkit-justify-content: center;
    }

    .grid .cell.show-candidates .candidates {
        display: -webkit-flex;
    }
